import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
} from "@mui/material";
import { useNavigate, useParams } from "react-router-dom";
import ReactDOM from "react-dom";

import { images } from "../../lib/data.js";

import "./PopUp.css";


const PopUp = ({isFullScreen = false}) => {
  const { id } = useParams();
  const image = images.find((image) => image.id === id);
  const navigate = useNavigate();

  const handleClose = () => {
    navigate("/");
  };

  const PopUp = (
    <Dialog
      fullScreen={isFullScreen}
      onClose={handleClose}
      aria-labelledby="customized-dialog-title"
      open={image !== null}
    >
      <DialogTitle sx={{ m: 0, p: 2 }} id="customized-dialog-title">
        {image.alt}
      </DialogTitle>
      <DialogContent dividers>
        <img className="modalImages" src={image.src} alt={image.alt} />
      </DialogContent>
      <DialogActions>
        <Button autoFocus onClick={handleClose}>
          Закрыть
        </Button>
      </DialogActions>
    </Dialog>
  );

  return ReactDOM.createPortal(PopUp, document.getElementById("root-modal"));
};

export default PopUp;
